<template>
  <div class="add_hospital_page">

    <div class="nav_bar">
      <div class="back" @click="goBack">
        <span class="el-icon-arrow-left"></span>
        <span>返回</span>
      </div>

      <div class="top_menus">
        <div class="menu_cell" :class="step == item.id ? 'menu_cell_active' : ''" v-for="(item, index) in menus" :key="index" @click="menuEvent(item)">{{ item.name }}</div>
      </div>
    </div>

    <!-- 基础信息 开始 -->
    <div class="content" v-show="step == 1">
      <el-form ref="addForm" :model="addForm" :rules="addFormRules" class="add_form" size="small" :label-width="labelWidth">
        <el-form-item label="文章名称：" prop="articleName">
          <el-input v-model.trim="addForm.articleName"></el-input>
        </el-form-item>
        <el-form-item label="文章作者：" prop="articleAuthor">
          <!-- <user-select v-model="addForm.articleAuthor" :multiple="false"></user-select> -->
          <el-input v-model.trim="addForm.articleAuthor"></el-input>
        </el-form-item>
        <el-form-item label="关联项目：" prop="projectId">
          <project-select v-model="addForm.projectId" :multiple="false"></project-select>
        </el-form-item>
        <el-form-item label="关联医院：">
          <hospital-select v-model="addForm.hospitalId"></hospital-select>
        </el-form-item>
        <el-form-item label="文章分类：" prop="articleClassId">
          <ArticleClass v-model="addForm.articleClassId"></ArticleClass>
        </el-form-item>
        <el-form-item label="图片：" class="long_form_item" prop="photograph">
          <ImageUpload v-model="addForm.photograph" :limit="5"></ImageUpload>
        </el-form-item>
        <el-form-item label="文章简介：" class="long_form_item">
          <el-input type="textarea" v-model="addForm.introduce" :rows="areaRows" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="文章内容：" class="long_form_item">
          <!-- <el-input type="textarea" v-model="addForm.content" :rows="areaRows" resize="none"></el-input> -->
          <WangEditor v-model="addForm.content"></WangEditor>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="nextStep">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 基础信息 end -->

    <!-- 平台运营 开始 -->
    <div class="content" v-show="step == 2">
      <el-form :model="addForm" ref="secondForm" :rules="secondFormRules" class="" size="small" :label-width="labelWidth">
        <el-form-item label="上架状态：" class="" prop="onShelf">
          <el-radio-group v-model="addForm.onShelf">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架可见</el-radio>
            <el-radio :label="0">下架不可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否首页：" class="" prop="homePageShow">
          <el-radio-group v-model="addForm.homePageShow">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="初始阅读数：" class="" prop="initReadCnt">
          <el-input v-model.trim="addForm.initReadCnt" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="排序时间：" class="" prop="orderTime">
          <el-date-picker v-model="addForm.orderTime" type="date" class="a_input" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="seo标题：" class="" prop="seoTitle">
          <el-input v-model.trim="addForm.seoTitle" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="seo关键词：" class="" prop="seoKeywords">
          <el-input type="textarea" v-model="addForm.seoKeywords" class="a_area" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="seo描述：" class="" prop="seoDescription">
          <el-input type="textarea" v-model.trim="addForm.seoDescription" class="a_area" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="" class="long_form_item">
          <el-button type="primary" :loading="loading" @click="saveInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 平台运营 end -->

  </div>
</template>
<script>
import ImageUpload from "@/components/upload/index.vue";
import WangEditor from "@/components/wangEditor/index.vue";
import { BASEURL, ADD_ARTICLE_INFO, EDIT_ARTICLE_INFO, GET_ARTICLE_INFO } from '@/http/information'
import { showToast, deepClone } from '@/common/util'
import ArticleClass from '@/components/select/articleClass.vue'
export default {
  components: {
    ImageUpload,
    WangEditor,
    ArticleClass
  },
  data() {
    return {
      menus: [
        { name: "基础信息", id: 1 },
        { name: "平台运营", id: 2 },
      ],
      step: 1,
      addForm: {},
      labelWidth: "120px",
      areaRows: 5,
      addFormRules: {
        articleName: [{ required: true, message: '请输入文章名称', trigger: 'blur' }],
        articleAuthor: [{ required: true, message: '请选择文章作者', trigger: 'change' }],
        projectId: [{ required: true, message: '请选择关联项目', trigger: 'change' }],
        articleClassId: [{ required: true, message: '请选择文章分类', trigger: 'change' }],
        photograph: [{ required: true, message: '请上传图片', trigger: 'change' }]
      },
      secondFormRules: {
        onShelf: [
          { required: true, message: "请选择上架状态", trigger: "change" },
        ],
        homePageShow: [{ required: true, message: "请选择是否首页", trigger: "change" }],
        initReadCnt: [{ required: true, message: "请输入初始阅读数", trigger: "blur" }],
        orderTime: [
          { required: true, message: "请输入排序时间", trigger: "blur" },
        ],
        seoTitle: [
          { required: true, message: "请输入seo标题", trigger: "blur" },
        ],
        seoKeywords: [
          { required: true, message: "请输入seo关键词", trigger: "blur" },
        ],
        seoDescription: [
          { required: true, message: "请输入seo描述", trigger: "blur" },
        ],
      },
      loading: false
    };
  },
  created() {
    let query = this.$route.query;
    if (query.id) {
      this.getInfo(query.id);
    }
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      //this.nextStep()
      if (this.step == 1) {
        this.$refs.addForm.validate(valid => {
          if (!valid) {
            return false;
          }
          this.step = row.id;
        })
        return false;
      }
      this.step = row.id;
    },

    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },

    // 下一步
    nextStep() {
      let _this = this;
      let step = this.step;
      if (step == 1) {
        this.$refs.addForm.validate(valid => {
          if (!valid) {
            return false;
          }
          _this.step = 2;
        })
        return false;
      }
      _this.step += 1;
    },

    // 获取百科详情
    getInfo(id) {
      let oParams = {};
      oParams.id = id;
      GET_ARTICLE_INFO(oParams).then((res) => {
        let obj = res.data || {};

        // 图片
        if (obj.photograph && obj.photograph.length) {
          let arr = [];
          obj.photograph.map((k) => {
            arr.push({
              name: k,
              url: BASEURL + k,
              path: k,
            });
          });
          obj.photograph = arr;
        }
        this.addForm = obj;
      });
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);

      // 图片
      if (o.photograph && o.photograph.length) {
        let arr = [];
        o.photograph.map((k) => {
          arr.push(k.path);
        });
        o.photograph = arr;
      }
      delete o.relQuestions
      delete o.relArticles;
      return o;
    },

    // 保存信息
    saveInfo() {
      let _this = this;
      let query = _this.$route.query;
      this.$refs.secondForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        console.log(oParams);
        _this.loading = true;

        // 编辑
        if (query.id) {
          oParams.id = query.id;
          EDIT_ARTICLE_INFO(oParams).then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              showToast({
                message: "编辑成功",
                type: "success",
              });
              _this.goBack();
            }
          });
          return false;
        }

        // 新增
        ADD_ARTICLE_INFO(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/addHospital.scss";
</style>